<script type="text/javascript">
/* <![CDATA[ */ 
//Global Variables
var isAppletLoaded = false;
var isDataLoaded = true;
var threshold = 0;

var data1 = [##_FRIENDS_##];
var data2 = [##_FOF_##];

$(document).ready(function(){

	buildFriendTable(data1);
	
    $('#threshold').val(threshold);
    $('#slider').slider({
        slide: function(event,ui){
            threshold = ui.value;
            $('#threshold').val(threshold);
            drawGraph();
        }
    });
	


var dWidth = 320;
var dHeight = 400;

shimIFrame();
$('#friend-container').dialog({ 
    autoOpen: false,
    width: 300, 
    height: 270,
    position: [300, 300],
    open: function(event, ui){
		
        $('#shimmer')
            .css('left', $('.ui-dialog').css('left'))
            .css('top' , $('.ui-dialog').css('top'))
            .width($('.ui-dialog').width()+8)
            .height($('.ui-dialog').height()+8)
            .show();
    },
    drag: function(event, ui){
        $('#shimmer')
            .css('left', ui.position.left)
            .css('top', ui.position.top)
    },
    resize: function(event, ui){
        $('#shimmer')
            .css('left', ui.position.left)
            .css('top' , ui.position.top)
            .width($('.ui-dialog').width()+8)
            .height($('.ui-dialog').height()+8);
    },
    close: function(event, ui){
        $('#shimmer').hide();
    }
  });   
    
    //Button Event Handlers
    $('#refresh-image').click(drawGraph);
    $('#remove_zero_score').change(drawGraph);
    $('#show_friend_table').click(function(){
        $('#friend-container').dialog("open");
    });

});

function drawGraph(){

    if(isAppletLoaded && isDataLoaded){

        var obj = document.getElementById('friendsNet');
		
		//show graph
		obj.setAttribute("style", "visibility:visible;");
        
        if (obj != null) {
            obj.setMaxDistance(maxDistance);
            obj.clearGraph();
    
            var maxValue = 0;
            var friends = $('table.rankTable');
            $('tr', friends).each(function(index){
                if (index != 0) {
                    var cols = $(this).children();
                    
                    if (index == 1) {
                        maxValue = cols.eq(2).text();
						//give slider max value
                        $('#slider').slider("option", "max", maxValue);
                    }
                    fId = $(cols.eq(1)).attr('id');
                    name = cols.eq(1).text();
                    score = cols.eq(2).text();
    
                    if(score >= threshold){
                        obj.addFriend(fId, name, getDistance(score, maxValue));
                    }
    
                }
            });
        }
    }
    addRelations();
}


function addRelations(data){
    var applet = document.getElementById('friendsNet');
    
    //Do something
    $(data).each(function(index, item){
        applet.addRelation(item.id1, item.id2);
    });	
}

function buildFriendTable(data){

    var maxValue = 0;
    var tbody = $('table.rankTable tbody');
    $(data).each(function(item, value){
        tbody.append("<tr>" + 
                          "<td>"+ eval(item + 1) +"</td>" + 
                          "<td id='"+ value.fId +"'><a target='_blank' href='[##_MY_LINK_URL_##]and=" + value.fId + "'>" + value.name +"</td>" + 
                          "<td>" + value.score + "</td>" +
                    "</tr>");
    });
}

function onAppletLoaded(){
    isAppletLoaded = true;
    drawGraph();
}

function onDataLoaded(){
    isDataLoaded = true;
    drawGraph();

}

function addRelations(){
	var applet = document.getElementById('friendsNet');
	$(data2).each(function(index, item){
		//Spring makeSpring( Particle a, Particle b, float strength, float damping, float restLength )
		applet.addRelation(item.id1, item.id2, 0.01, 0.01, 50);
	});

}


function linkToFriendshipPage(id){
	var url = "/o-my-friends/friendship.php?[##_QUERY_STRING_##]&fId=" + id;
	if (confirm("Do you want to go to the friendship page?")) {
	   window.location.href = url;
    }
}

/* ]]> */
</script>